<template>
  <div class="block">
    <h2 id="title">管理员登录</h2>
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="账号" prop="account">
        <el-input type="text" placeholder="账号" v-model="ruleForm.account" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input type="password" placeholder="密码" v-model="ruleForm.pass" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <el-input class="cap" placeholder="验证码" v-model="ruleForm.code"></el-input>
        <span class="svg" @click="getCaptcha()" v-html="captcha"></span>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width:100px" @click="submitForm('ruleForm')">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

import axios from "axios";
axios.defaults.withCredentials = true;

export default {
  name: "Login",
  data() {
    var checkCode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入验证码"));
      } else {
        callback();
      }
    };
    var validateAccount = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账号"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        account: "", // 账号
        pass: "", // 密码
        code: "", // 输入的验证码
      },
      rules: {
        account: [{ validator: validateAccount, trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }],
        code: [{ validator: checkCode, trigger: "blur" }],
      },
      captcha: "",
      token: localStorage.getItem('token'),
    };
  },
  methods: {
    async submitForm(formName) {
      try {
        await this.$refs[formName].validate();
        const res = await this.$axios.post("/getUser", {
          username: `${this.ruleForm.account}`,
          pwd: `${this.ruleForm.pass}`,
          captcha: `${this.ruleForm.code}`,
        });
        if (res.msg == "登录成功") {
          this.$message.success(res.msg);
          const token = res.token;
          localStorage.setItem('token', token);
          this.token = token;
          this.$router.push('./index/ImgManager');
        } else {
          this.$message.error(res.msg);
          this.getCaptcha();
        }
      } catch (error) {
        this.$message.error("有未填写的内容");
        return false;
      }
    },
    async getCaptcha() {
      const res = await this.$axios.get("captcha");
      this.captcha = res.img;
    }
  },
  mounted() {
    this.getCaptcha()
  }
}
</script>

<style scoped>
.block {
  margin-top: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#title {
  margin-left: 80px;
  font-weight: bold;
  color: blue;
  margin-bottom: 120px;
}

.cap {
  width: 135px;
}

.svg {
  float: right;
}
</style>